<template>
  <div class="table-box">
    <ProTable ref="proTable" title="门店列表" row-key="id" :columns="columns" :request-api="getGroupStoreList">
      <template #tableHeader>
        <el-button v-auth="'add'" type="primary" :icon="CirclePlus" @click="openByGroupDialog('新增', createData)">
          新增商户
        </el-button>
      </template>
      <template #operation="scope">
        <el-button v-auth="'edit'" type="primary" link :icon="EditPen" @click="openMerchantDialog(scope.row)"> 编辑 </el-button>
        <el-button v-auth="'reSet'" type="primary" link :icon="Refresh" @click="resetPassword(scope.row)"> 重置密码 </el-button>
      </template>
    </ProTable>
    <ByGroupDialog ref="byGroupDialogRef" />
    <MerchantDialog ref="merchantDialogRef" />
  </div>
</template>

<script setup lang="tsx" name="merchant">
import { ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { checkFlag } from "@/utils/serviceDict";
import ByGroupDialog from "@/views/operation/components/ByGroupDialog.vue";
import { Operation } from "@/api/interface";
import { EditPen, Refresh } from "@element-plus/icons-vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getGroupStoreList, createByGroup, editStore } from "@/api/modules/operation";
import { useHandleData } from "@/hooks/useHandleData";
import { formatDate } from "@/utils/date-formatter";
import MerchantDialog from "@/views/operation/components/MerchantDialog.vue";
import { resetPas } from "@/api/modules/system";

const proTable = ref<ProTableInstance>();

const columns: ColumnProps<Operation.ResGroupStoreList>[] = [
  { type: "index", label: "序号", width: 60 },
  {
    sortable: true,
    prop: "id",
    label: "商户ID",
    align: "left",
    minWidth: 120,
    search: { el: "input", label: "商户搜索", key: "storeName" }
  },
  { sortable: true, prop: "storeName", label: "商户名称", minWidth: 120, align: "left" },
  { sortable: true, prop: "userName", label: "用户名称", minWidth: 120, align: "left" },
  { sortable: true, prop: "activationCode", label: "邀请码", minWidth: 100, align: "left" },
  { sortable: true, prop: "mobile", label: "联系电话", minWidth: 120, align: "left" },
  { sortable: true, prop: "createTime", label: "注册时间", minWidth: 164, align: "left" },
  { sortable: true, prop: "defaultPassWord", label: "默认密码", minWidth: 164, align: "left" },
  { sortable: true, prop: "endDate", label: "到期时间", minWidth: 164, align: "left" },
  { sortable: true, prop: "smsSign", label: "短信签名", minWidth: 120, align: "left" },
  { sortable: true, prop: "smsCheckFlag", label: "签名审核状态", minWidth: 140, enum: checkFlag },
  { sortable: true, prop: "smsSignApplyTime	", label: "签名申请时间", minWidth: 164, align: "left" },
  { sortable: true, prop: "parentStoreId", label: "上级商户编码", minWidth: 140, align: "left" },
  { sortable: true, prop: "parentStoreName", label: "上级商户名称", minWidth: 140, align: "left" },
  { sortable: true, prop: "linkMan", label: "联系人", minWidth: 164, align: "left" },
  { sortable: true, prop: "address", label: "门店详细信息", minWidth: 164, align: "left" },
  { prop: "operation", label: "操作", minWidth: 200, fixed: "right" }
];
const createData = ref({
  isCreateFacCode: true,
  createCount: 1,
  endDate: formatDate(366, "start", "yyyy-MM-dd")
});
const byGroupDialogRef = ref<InstanceType<typeof ByGroupDialog> | null>(null);
const openByGroupDialog = (title: string, row: Partial<Operation.ResGroupStoreList> = {}) => {
  const params = {
    title,
    isView: false,
    row: { ...row },
    api: createByGroup,
    getTableList: proTable.value?.getTableList
  };
  byGroupDialogRef.value?.acceptParams(params);
};

const resetPassword = async (params: Operation.ResGroupStoreList) => {
  await useHandleData(resetPas, { id: params.id }, `重置【${params.storeName}】密码`);
  proTable.value?.getTableList();
};

const merchantDialogRef = ref<InstanceType<typeof MerchantDialog> | null>(null);
const openMerchantDialog = (row: Partial<Operation.ResGroupStoreList> = {}) => {
  const params = {
    title: "商户资料",
    isView: false,
    row: { ...row, isGroup: 1 },
    api: editStore,
    getTableList: proTable.value?.getTableList
  };
  merchantDialogRef.value?.acceptParams(params);
};
</script>
